<template>
  <div class="all">
    <!-- RegularService定时服务 -->
  <!-- <span v-show="true">{{RegularServiceData}}</span> -->
    <div class="yes">
      <div class="img">
        <div class="imginner"></div>
        <div class="title">启用{{RegularServiceData.Yes.length}}个</div>
      </div>
      <div class="msg">
        <!-- <span>{{RegularServiceData}}</span> -->
        <div class="list" v-for="(item,index) in RegularServiceData.Yes" :key="index">{{index+1}}.{{item.methodParams}}</div>
        <!-- <div class="list">2.每日0时定时重启服务器人每日0时定... 拷贝</div>
        <div class="list">3.每日0时定时重启服务器人每日0时定... 拷贝</div>
        <div class="list">4.每日0时定时重启服务器人每日0时定... 拷贝</div>
        <div class="list">5.每日0时定时重启服务器人每日0时定... 拷贝</div> -->
      </div>
    </div>
    <div class="segmentation"></div>
    <div class="no">
      <div class="img">
        <div class="imginner"></div>
        <div class="title">禁用{{RegularServiceData.No.length}}个</div>
      </div>
      <div class="msg">
        <div class="msg">
          <div class="list" v-for="(item,index) in RegularServiceData.No" :key="index">{{index+1}}.{{item.methodParams}}</div>
          <!-- <div class="list">1.每日0时定时重启服务器 拷贝</div>
          <div class="list">2.每日0时定时重启服务器人每日0时定... 拷贝</div>
          <div class="list">3.每日0时定时重启服务器人每日0时定... 拷贝</div>
          <div class="list">4.每日0时定时重启服务器人每日0时定... 拷贝</div>
          <div class="list">5.每日0时定时重启服务器人每日0时定... 拷贝</div> -->
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props:["RegularServiceData"],
  data(){
    return{
      CloneData:{}
    }
  },
  // created(){
  //   this.CloneData=JSON.parse(JSON.stringify(this.RegularServiceData))
  // },
  mounted() {
     console.log("定时任务运行监控....");
    console.log(this.RegularServiceData)
  },
}
</script>
<style lang="scss" scoped>
.all {
  width: 100%;
  height: 100%;
  background: #ffffff;
  padding: 10px;
  display: flex;
  flex-direction: column;
  .yes {
    flex: 1;
    display: flex;
    align-items: center;
    // height: 100px;
    // background: darkorange;
    .img {
      width: 100px;
      height: 100px;
      display: flex;
      align-items: center;
      // background: red;
      .imginner {
        width: 50px;
        height: 50px;
        background: url("./imges/yes.png") no-repeat 50% 50%;
      }
      .title {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 50px;
        height: 50px;
        padding: 6px;
      }
    }
    .msg {
      flex: 100;
      .list {
        padding: 2px 5px;
        // background: floralwhite;
      }
    }
  }
  .segmentation {
    border-top: 1px solid #ccc;
    margin: 5px 2px;
  }
  .no {
    flex: 1;
    display: flex;
    align-items: center;

    // height: 100px;
    // background: darkorange;
    .img {
      width: 100px;
      height: 100px;
      display: flex;
      align-items: center;
      // background: red;
      .imginner {
        width: 50px;
        height: 50px;
        background: url("./imges/no.png") no-repeat 50% 50%;
      }
      .title {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 50px;
        height: 50px;
        padding: 6px;
      }
    }
    .msg {
      flex: 100;
      .list {
        padding: 2px 5px;
        // background: floralwhite;
      }
    }
  }
}
</style>